<template>
  <div class="layout-container">
    <!-- v-model语法糖理解  导入全局组件SyntacticSugar -->
    <!-- <SyntacticSugar v-model="show">
      <h1>弹层内容</h1>
    </SyntacticSugar>
    <button @click="show = !show">点击展示或者隐藏弹层</button> -->

    <!-- 文章分类栏 -->
    <van-tabs swipeable animated v-model="identifier">
      <!-- 8个页签 -->
      <van-tab :key="item.id" v-for="item in channelList" :title="item.name">
        <!-- 可滚动内容区域 -->
        <!-- 默认插槽 显示内容区域 -->
        <ArticleList :channel_id="item.id"></ArticleList>
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span class="bar_btn" @click="showEditChannel = true">
      <van-icon name="wap-nav"></van-icon>
    </span>
    <!-- <ChannelEdit
      v-model="showEditChannel"
      :channelIdentifier="identifier"
      :userChannelList="channelList"
      @enter-channel="identifier = $event"
    ></ChannelEdit> -->

    <!-- vue2中===> 子传父 同步修改数据 sync新写法:
       父组件中===> :prop.sync="变量名"
       子组件中===>  this.$emit('update:prop',传过来要修改的值)
       vue3中不再支持!
     -->
    <ChannelEdit
      v-model="showEditChannel"
      :channelIdentifier.sync="identifier"
      :userChannelList="channelList"
    ></ChannelEdit>
  </div>
</template>

<script>
import ChannelEdit from '@/views/home/components/channel-edit.vue'
import ArticleList from '@/views/home/components/ArticleList.vue'
// import request from '@/utils/request.js'
import { getUserChannelApi } from '@/api/channelAPi.js'
export default {
  name: 'home-index',
  data () {
    return {
      channelList: [],
      showEditChannel: false,
      show: false,
      // tabs里tab的标识符(索引值)
      identifier: 0
    }
  },
  methods: {
    // 测试代码
    // sendToken () {
    //   this.$store.commit('setToken', { token: 1, refresh_token: 2 })
    // }
    async getChannels () {
      const { data } = await getUserChannelApi()
      // console.log('获取频道列表', data)
      this.channelList = data.channels
    }
  },
  components: {
    ArticleList,
    // PopUP
    ChannelEdit
  },
  created () {
    this.getChannels()
    // this.sendToken()
    // request({ url: 'announcements' }).then(res => {
    //   console.log('测试请求', res.data)
    // })
    // request.get('user/profile').then(res => {
    //   console.log('个人资料请求', res)
    // })
  },
  // 组件缓存狗子函数
  activated () { // 缓存默认执行一次
    // console.log('已经切换到home路由组件了 成功缓存激活了')
  },
  // 离开被缓存的组件执行
  deactivated () {
    // console.log('home组件在缓存中失活了')
  }

}
</script>

<style scoped lang='less'>
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 自定义tab样式
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #fc6627;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    // 控制列表区域可滚动
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: -6px -6px 8px #ddd;
}
</style>
